{{extend 'header-footer.html'}}
{{extend 'page-header.html'}}
<script>
	$(document).ready(function() {
	$( ".birthday").datepicker({ dateFormat: 'yy-mm-dd',
		yearRange : '1988:2005',
		changeYear: true });
  });
</script>

<div class='list_edit'>
	<ul>
		<li><a href='{{=URL('default','user','profile')}}'>Basic Information</a></li>
		<li><a href='{{=URL('default','user','change_password')}}'>password</a></li>
		<li><a href='{{=URL('default','user','profile')}}'>Contact Information</a></li>
		<li><a href='{{=URL('default','user','profile')}}'>Linked to other social networks</a></li>
	</ul>
</div>


{{if request.args(0)=='profile':}}
	<div class='cblock'>
	
	<div class='edit_profile'>
	
	{{=form.custom.begin}}
	<table border='0' cellpadding='2'width='90%'>
		<tr>
			<td>
				<label for="user_name">Picture </label>	
			</td>
			<td>
				<div class="input avatar-settings">
				<img class="profile-image" height="73" width="73" src='img/user.jpg' alt="S875000524_5643564_29_bigger">
				<span class="avatar-upload">
				<input id="profile_image_uploaded_data" type="file" size="15" name="">
				<p class="help-block">Maximum size of 700k. JPG, GIF, PNG.</p>
				</span>
				<span class="avatar-actions">
				<a class="delete_image" href="#">Delete this image</a>
				</span>
				</div>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<label for="user_name">First name</label>	
			</td>
			<td>
				<input class='input_profile' type='text' name='first_name' onBlur="if(this.value=='')this.value=this.defaultValue;" onfocus ="if(this.value==this.defaultValue)this.value='';" value=' First name'/><br />
			</td>
		</tr>
		<tr>
			<td>
				<label for="user_name">Last name </label>	
			</td>
			<td>
				<input class='input_profile' type='text' name='last_name'onBlur="if(this.value=='')this.value=this.defaultValue;" onfocus ="if(this.value==this.defaultValue)this.value='';" value=' Last name' /><br /><br />
			</td>
		</tr>
		<tr>
		    <td>
				<label for='birthday_month'>Birth Date</label>
			</td>
			<td>
				<input name='birthday' class='birthday' />
			</td>
		</tr>
		<tr>
			<td>
				<label >Gender</label>
			</td>
			<td>
				<select name='gender'>
					<option value={{=auth.user.gender}} selected=selected>
						no change
					</option>
					<option value=1 >
						male
					</option>
					<option value=0 >
						female
					</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<label for="bio">Bio</label>	
			</td>
			<td>
				<textarea class='input_profile' rows='4'  name='bio' ></textarea>
			</td>
		</tr>
		
		<tr>
			<td > </td>
			<td >
			<!--class='button_update'-->
				{{=form.custom.submit}}
			</td>
		</tr>
	</table>
    {{=form.custom.end}}
	</div>

	
<div class='clear'></div>

{{elif request.args(0)=='change_password':}}

<div class='cblock'>
	<div class='edit_profile'>
	
	{{=form.custom.begin}}
	<table border='0' cellpadding='2'width='90%'>
		
		
		<tr>
			<td>
				<label for="cpass">Current Password</label>
			</td>
			<td>
				<input class='input_profile' type='text' name='old_password' onBlur="if(this.value=='')this.value=this.defaultValue;" onfocus ="if(this.value==this.defaultValue)this.value='';" value=' Current password '/><br />
			</td>
		</tr>
		<tr>
			<td>
				<label for="npass">New Password</label>
			</td>
			<td>
				<input class='input_profile' type='text' name='new_password' onBlur="if(this.value=='')this.value=this.defaultValue;" onfocus ="if(this.value==this.defaultValue)this.value='';" value=' New password '/><br />
			</td>
		</tr>
		<tr>
			<td>
				<label for="cnpass">Confirm new password</label>	
			</td>
			<td>
				<input class='input_profile' type='text' name='new_password2' onBlur="if(this.value=='')this.value=this.defaultValue;" onfocus ="if(this.value==this.defaultValue)this.value='';" value=' Confirm new password '/><br />
			</td>
		</tr>
		<tr>
			<td > </td>
			<td >
				<input class='button_update' type='submit' value='Change password' />
			</td>
		</tr>
	</table>
    {{=form.custom.end}}
	</div>
	</div>
	
{{pass}}